<template>
  <div class="app-container">
    <div class="container-header">
      <img src="../../../assets/icon1.png" alt=""> <span class="header-title">{{deptName?deptName:"管理员"}}</span> 日期： <el-date-picker size="small"
        v-model="selectDate" type="date" placeholder="请选择" />
    </div>

    <el-collapse v-model="activeName" accordion @change="bindChangeAccordion">
      <el-collapse-item :name="i+1" v-for="(opt,i) in activeList" :key="i">
        <template #title>
          <span class="accordion-title"> {{opt.title}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-orange">待上报</span>
        </template>
        <el-table :data="tableData" :span-method="arraySpanMethod" :cell-class-name="tableRowClassName" border :show-header="false" v-if="activeName!=2">
          <el-table-column prop="test1" label="通行量(辆)" width="108" />
          <el-table-column prop="test2" label="" width="123">
            <template #default="scope">
              <div v-if="scope.row.isInput&&scope.row.remark=='remark'">
                <el-input v-model="remark" placeholder="请输入" @input="bindChangeRemark($event,'remark')" class="inputDeep" />
              </div>
            </template>
          </el-table-column>
          <el-table-column :prop="'amount'+(index+1)" v-for="(item,index) in 6" :key="index">
            <template #default="scope">
              <div v-if="scope.row.isInput">
                <el-input v-model="postData[index][scope.row.index==0?'enTraffic':scope.row.index==1? 'exTraffic':'fee']" placeholder="请输入"
                  @input="bindChangeForm($event,index,scope.row.index==0?'enTraffic':scope.row.index==1? 'exTraffic':'fee')" class="inputDeep" />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 特殊样式处理 -->
        <el-table :data="tableData" :span-method="arraySpanMethod" :cell-class-name="tableRowClassName" border :show-header="false" v-if="activeName==2">
          <el-table-column prop="test1" label="通行量(辆)" width="108" />
          <el-table-column prop="test2" label="" width="123">
            <template #default="scope">
              <div v-if="scope.row.isInput&&scope.row.remark=='remark'">
                <el-input v-model="remark" placeholder="请输入" @input="bindChangeRemark($event,'remark')" class="inputDeep" />
              </div>
            </template>
          </el-table-column>
          <el-table-column :prop="'amount'+(index+1)" v-for="(item,index) in 9" :key="index">
            <template #default="scope">
              <div v-if="scope.row.isInput">
                <el-input v-model="postData[index][scope.row.index==0?'enTraffic':scope.row.index==1? 'exTraffic':'fee']" placeholder="请输入"
                  @input="bindChangeForm($event,index,scope.row.index==0?'enTraffic':scope.row.index==1? 'exTraffic':'fee')" class="inputDeep" />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="tableData2" :span-method="arrayBottomSpanMethod" :cell-class-name="tableRowBottomClassName" border :show-header="false"
          v-if="activeName==2">
          <el-table-column prop="test1" label="通行量(辆)" width="108" />
          <el-table-column prop="test2" label="" width="123">
            <template #default="scope">
              <div v-if="scope.row.isInput&&scope.row.remark=='remark'">
                <el-input v-model="remark" placeholder="请输入" @input="bindChangeRemark($event,'remark')" class="inputDeep" />
              </div>
            </template>
          </el-table-column>
          <el-table-column :prop="'amount'+(index+1)" v-for="(item,index) in 6" :key="index">
            <template #default="scope">
              <div v-if="scope.row.isInput">
                <el-input v-model="postData[index][scope.row.index==0?'enTraffic':scope.row.index==1? 'exTraffic':'fee']" placeholder="请输入"
                  @input="bindChangeForm($event,index,scope.row.index==0?'enTraffic':scope.row.index==1? 'exTraffic':'fee')" class="inputDeep" />
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="submit">
          <el-button type="primary" @click="bindSubmit">提交</el-button>
        </div>
      </el-collapse-item>

    </el-collapse>
  </div>
</template>
  
<script setup name="User">
import { listTicket, addTicke, InfoTicket } from "@/api/charge/ticket";
import useUserStore from '@/store/modules/user'
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex");

let postDataDefult = [{ enTraffic: '', exTraffic: '', fee: "", header: 'A' }, { enTraffic: '', exTraffic: '', fee: "", header: 'B' }, { enTraffic: '', exTraffic: '', fee: "", header: 'C' },
{ enTraffic: '', exTraffic: '', fee: "", header: 'D' }, { enTraffic: '', exTraffic: '', fee: "", header: 'E' }, { enTraffic: '', exTraffic: '', fee: "", header: 'H' }]
const userStore = useUserStore()
const activeName = ref('1')
const activeList = ref([{ title: '收费站现金客车日报表' }, { title: '收费站现金货车日报表' }, { title: '收费站ETC客车日报表' }, { title: '收费站ETC货车日报表' }, { title: '收费站非现金客车日报表' }, { title: '收费站非现金货车日报表' }, { title: '运输鲜活农产品车辆日报表' }])
const postData = ref(postDataDefult)
const selectDate = ref()//日期
const ticketName = ref("收费站现金客车日报表")
const info = ref({})
const deptName = ref()
const remark = ref()
const queryParams = ref({ reportDate: '', deptId: '' })
const tableData = ref([{ test1: "通行量(辆)", test2: "", amount1: 'A', amount2: "B", amount3: "C", amount4: "D", amount5: "E", amount6: "H" }, { test1: "入口", isInput: true, index: 0 }, { test1: "出口", isInput: true, index: 1 },
{ test1: "通行费(元)", test2: '', amount1: 'A', amount2: "B", amount3: "C", amount4: "D", amount5: "E", amount6: "H" }, { test1: "", test2: '', index: 2, isInput: true }, { test1: "备注", isInput: true, remark: 'remark', }])
const tableData2 = ref([])
// 表格
const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return {
        rowspan: 3,
        colspan: 1,
      }
    } else if (rowIndex === 3) {
      return {
        rowspan: 2,
        colspan: 2,
      }
    } else if (rowIndex == 5) {
      return {
        rowspan: 1,
        colspan: 2,
      }
    } else if (rowIndex == 4) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  } else if (rowIndex === 3 && columnIndex == 1) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (rowIndex === 1 && columnIndex == 1) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (rowIndex === 2 && columnIndex == 1) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (rowIndex == 4 && columnIndex == 1) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (rowIndex === 5 && columnIndex == 1) {
    return {
      rowspan: 1,
      colspan: 6,
    }
  } else if (rowIndex === 5 && columnIndex != 1 && columnIndex != 0) {
    return {
      rowspan: 0,
      colspan: 0
    }
  }

}

const arrayBottomSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return {
        rowspan: 2,
        colspan: 2,
      }
    } else if (rowIndex == 2) {
      return {
        rowspan: 1,
        colspan: 2,
      }
    } else if (rowIndex == 1) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  } else if (rowIndex === 0 && columnIndex == 1) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (rowIndex == 1 && columnIndex == 1) {
    return {
      rowspan: 0,
      colspan: 0
    }
  } else if (rowIndex === 2 && columnIndex == 1) {
    return {
      rowspan: 1,
      colspan: 6,
    }
  } else if (rowIndex === 2 && columnIndex != 1 && columnIndex != 0) {
    return {
      rowspan: 0,
      colspan: 0
    }
  }

}
// 央视
const tableRowClassName = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (rowIndex === 0) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  } else if (rowIndex === 5 && (columnIndex == 0)) {
    return 'info-row'
  } else if (rowIndex === 1 && columnIndex == 0) {
    return 'warning-row'
  } else if (rowIndex === 2 && columnIndex == 0) {
    return 'warning-row'
  }
  return ''
}
const tableRowBottomClassName = ({
  row,
  column,
  rowIndex,
  columnIndex,
}) => {
  if (rowIndex === 0) {
    return 'success-row'
  } else if (rowIndex === 2 && (columnIndex == 0)) {
    return 'info-row'
  }
  return ''
}
/** 查询列表 */
function getList() {
  listTicket(queryParams.value).then(res => {
    info.value = res.data
    if (res.code == 200) {
      postData.value = res.data.list;
      remark.value = res.data.remark;
    }

  });
};

const bindChangeAccordion = (val) => {
  ticketName.value = activeList.value[val - 1].title;
  if (val == 2) {
    let arr = ['超限30%以下', '超限30%-50%', '超限50%-100%', '超限100%以上']
    tableData.value = [{ test1: "通行量(辆)", test2: "", amount1: 'A', amount2: "B", amount3: "C", amount4: "D", amount5: "H", amount6: "超限30%以下", amount7: "超限30%-50%", amount8: "超限50%-100%", amount9: "超限100%以上", }, { test1: "入口", isInput: true, index: 0 }, { test1: "出口", isInput: true, index: 1 },
    ]
    if (!postData.value) {
      postData.value = postDataDefult
    }
    postData.value.splice(4, 1)
    tableData2.value = [{ test1: "通行费(元)", test2: '', amount1: 'A', amount2: "B", amount3: "C", amount4: "D", amount5: "H" }, { test1: "", test2: '', index: 2, isInput: true }, { test1: "备注", isInput: true, remark: 'remark', }]
    for (let i = 0; i <= 3; i++) {
      postData.value.push({ enTraffic: '', exTraffic: '', fee: "", header: arr[i] })
    }
  }
  getInfo()

}
function getInfo() {
  InfoTicket({ ...queryParams.value, ticketName: ticketName.value }).then(res => {
    info.value = res.data
    if (res.code == 200 && res.data) {
      postData.value = res.data.list;
      remark.value = res.data.remark;
    } else {
      postData.value = postDataDefult
    }

  });
};


const bindChangeForm = (val, index, name) => {

  postData.value[index][name] = val;


}
const getDeptId = () => {
  userStore.getInfo().then(res => {
    if (res.code == 200) {
      deptName.value = res.user.dept.deptName;
      queryParams.value.deptId = res.user.dept.deptId;
      queryParams.value.reportDate = selectDate.value
      getList()
    }

  })
}
const bindChangeRemark = (val) => {
  remark.value = val;
}
const bindSubmit = () => {
  addTicke({ list: postData.value, ...queryParams.value, remark: remark.value }).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess("提交成功");
    }
  });
}

// 获取时间
const currentTime = () => {
  var date = new Date();
  var year = date.getFullYear();
  var dateArr = [
    date.getMonth() + 1,
    date.getDate(),
  ];
  for (var i = 0; i < dateArr.length; i++) {
    if (dateArr[i] >= 1 && dateArr[i] <= 9) {
      dateArr[i] = "0" + dateArr[i];
    }
  }
  var strDate = year + '-' + dateArr[0] + '-' + dateArr[1]
  selectDate.value = strDate
}

currentTime()
getDeptId()

</script>
  
  
<style scoped \>
.container-header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  color: #333;
  font-size: 14px;
}
.container-header img {
  width: 18px;
  height: 18px;
}
.container-header .header-title {
  font-size: 16px;
  font-weight: 700;
  padding: 0 12px 0 4px;
  line-height: 23px;
}
.submit {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.text-orange {
  color: #ff920d;
}
.accordion-title {
  font-size: 14px;
  color: #333;
  font-weight: 700;
  padding-left: 22px;
}

/* 改element */
.el-collapse {
  border-top: none;
  border-bottom: none;
}
.el-collapse-item {
  border-top: 1px solid #f5f5f5;
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;
  margin-bottom: 12px;
}
/deep/ .el-collapse-item__wrap {
  background: #fafafa !important;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #e4e4e4;
  padding: 17px;
  box-sizing: border-box;
}

/deep/ .el-table .warning-row {
  background: #e0eafb !important;
  text-align: center;
}
/deep/ .el-table .success-row {
  background: #ffeed9 !important;
  text-align: center;
}
/deep/ .el-table .info-row {
  background: #eaeaea !important;
  text-align: center;
}
/deep/ .el-table--default .el-table__cell {
  padding: 0;
}
/deep/ .el-table--default .cell {
  height: 50px;
  line-height: 50px;
  padding: 0;
}
/deep/ .el-collapse-item__content {
  padding-bottom: 0;
}
.inputDeep >>> .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: none !important;
  width: 100%;
  box-shadow: none !important;
}

.inputDeep >>> .el-input__inner:focus {
  outline: none;
}
.inputDeep >>> .el-input__wrapper {
  height: 50px;
  line-height: 50px;
  box-shadow: none !important;
}
.inputDeep >>> .el-input__wrapper:hover {
  box-shadow: none !important;
}
</style>